<template>
  <ex-dialog
    width="900px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="标题" prop="customerPhone">
				<el-input type="text" v-model="ruleForm.customerPhone" autocomplete="off" placeholder="请输入手机号"></el-input>
			</el-form-item>
      <el-form-item label="通知模板" prop="customerPhone">
        <el-select v-model="ruleForm.source" placeholder="全部" size="small">
          <el-option v-for="item in sourceList" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
        <el-button type="primary" style="margin-left: 20px">查看模板</el-button>
			</el-form-item>
      <div style="margin-bottom: 14px">
        <div style="margin-bottom: 14px;color: #606266;">通知用户：</div>
        <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData" :showPage="false">
          <template v-slot:operate="{ scope }">
            <el-button @click="lookDetail(scope.row.id)" size="small">编辑</el-button>
          </template>
        </ex-table>
      </div>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">保存草稿</el-button>
				<el-button @click="handleClose('ruleForm')">取消</el-button>
			</el-form-item>
		</el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
import {
  getToken
} from "@/utils/auth";
// api
import {
  addVirtual
} from '@/api/inviteNew'

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    
    return {
      title: '新增短信通知',
      radio: '',
      fileData: {
          id: '',
      },
      fileList: [],
      fileaction: process.env.VUE_APP_BASE_API + "/airdrop/v1/customer/import",
      headers: {
        "X-Access-Token": getToken(),
      }, //设置上传文件请求头
      imgLoading: false,
      sourceList: [],
			ruleForm: {
				customerPhone: '',
				customerAvatar: '',
        activityId: '',
        source: '',
			},
			rules: {
        customerPhone: [
          { required: true,message: '输入手机号',trigger: 'blur' }
        ],
        customerAvatar: [
          { required: true,message: '请上传头像', trigger: 'change' }
        ]
      },
      loading: false,
      tableData: [],
      tableColumn: [{
            prop: "orderNo",
            label: "用户姓名"
          },
          {
            prop: "paySourceDict",
            label: "手机号",
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            fixed: "right",
            width: 100
          },
        ],
    }
  },
  computed: {
   
  },
  created() {
    this.ruleForm.activityId = this.id
	},
  methods: {

    //新建子账号
    submitForm(formName) {
      console.log('formName',formName)
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) {
            var data = {
            ...this.ruleForm
            }
            addVirtual(data).then(res => {
              this.handleSuccess("创建成功")
            }).finally(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}
::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}
.el-radio-group{
  display: flex;
  justify-content: flex-start;
}
.el-radio{
  display: flex;
  justify-content: flex-start;
  ::v-deep .el-radio__input{
    margin-top: 14px;
  }
  
}

</style>